<template>
  <BasicModal @register="registerModal" :width="1200" :title="title" @ok="handleSubmit">
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useForm, BasicForm } from '/@/components/Form';
  import { zhuyunFormSchema } from './Zhuyun.data';
  import { getThirdConfigByTenantId, saveOrUpdateThirdConfig } from './ThirdApp.api';
  export default defineComponent({
    name: 'ZhuyunConfigModal',
    components: { BasicModal, BasicForm },
    emits: ['success'],
    setup(props, { emit }) {
      const title = ref<string>('竹云配置');
      //表单配置
      const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
        schemas: zhuyunFormSchema,
        showActionButtonGroup: false,
        labelWidth: 150,
        wrapperCol: { span: 16 },
        baseColProps: { span: 12 },
      });

      //表单赋值
      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        setModalProps({ confirmLoading: true });

        //重置表单
        await resetFields();
        let values = await getThirdConfigByTenantId({ tenantId: data.tenantId, thirdType: data.thirdType });
        setModalProps({ confirmLoading: false });
        //表单赋值
        if (values) {
          await setFieldsValue(values);
        } else {
          await setFieldsValue(data);
        }
      });

      /**
       * 第三方配置点击事件
       */
      async function handleSubmit() {
        let values = await validate();
        let isUpdate = false;
        if (values.id) {
          isUpdate = true;
        }
        await saveOrUpdateThirdConfig(values, isUpdate);
        emit('success');
        closeModal();
      }

      return {
        title,
        registerForm,
        registerModal,
        handleSubmit,
      };
    },
  });
</script>

<style scoped></style>
